import React, { useState } from 'react'
import { Upload, Input, message } from 'antd'

export default (props: any) => {

    const { navList, setNavList, inx } = props

    const handleChange = (info: any) => {
        let fileList = info.fileList;
        fileList = fileList.slice(-1);
        if (info.file.status === 'done') {
            message.success(`${info.file.name}文件上传成功`);
            fileList[0].url = fileList[0]['response']['data']['filePath'];

            const result = [...navList]
            result[inx].url = fileList[0].url
            setNavList(result)
        }
        return fileList
    };

    // const uploadButton = (
    //     <div>
    //         {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
    //         <div className="ant-upload-text">Upload</div>
    //     </div>
    // );

    if (navList[inx]["url"].length < 1) {
        navList[inx]["url"] = 'http://uniapp.b2b2c.niuteam.cn/public/static/ext/diyview/img/crack_figure.png';
    }

    return (
        <div style={{ display: "flex", padding: "10px 10px 0 10px", border: "1px dashed #e5e5e5", marginBottom: "10px" }}>
            <div>
                <Upload
                    name="file"
                    listType="picture-card"
                    showUploadList={false}
                    action='http://127.0.0.1:8888/admin/tool/upload'
                    onChange={handleChange}
                >
                    <img src={navList[inx]["url"]} alt="" style={{ maxWidth: "100%" }} />
                </Upload>
            </div>
            <div style={{ display: "flex", justifyContent: "center", flexDirection: "column", height: "104px" }}>
                <div style={{ display: "flex" }}>
                    <span style={{ width: "100px", textAlign: "right", fontSize: "12px" }}>标题：</span> <Input value={navList[inx]["title"]} onChange={(e) => {
                        // e.target.value
                        // navList
                        // navList[inx]['title']
                        const result = [...navList]
                        result[inx].title = e.target.value
                        setNavList(result)
                    }} />
                </div>

                <div style={{ display: "flex", marginTop: "8px" }}>
                    <span style={{ width: "100px", textAlign: "right", fontSize: "12px" }}>链接地址：</span> <Input />
                </div>
            </div>
        </div>
    )
}